Phát triển Tiện ích Mở rộng Trình duyệt: Điều hướng Manifest V3 và các API JavaScript

Tiện ích mở rộng trình duyệt cung cấp một cách mạnh mẽ để nâng cao và tùy chỉnh trải nghiệm duyệt web. Chúng cho phép các nhà phát triển thêm chức năng vào trình duyệt web, tương tác với các trang web và tích hợp với các dịch vụ web. Hướng dẫn này cung cấp một cái nhìn tổng quan toàn diện về phát triển tiện ích mở rộng trình duyệt, tập trung vào Manifest V3 và các API JavaScript cốt lõi cung cấp năng lượng cho các tiện ích này.

Tìm hiểu về Tiện ích Mở rộng Trình duyệt

Tiện ích mở rộng trình duyệt là một chương trình phần mềm nhỏ giúp mở rộng chức năng của trình duyệt web. Các tiện ích mở rộng có thể sửa đổi các trang web, thêm các tính năng mới và tích hợp với các dịch vụ bên ngoài. Chúng thường được viết bằng JavaScript, HTML và CSS, và được đóng gói dưới dạng tệp ZIP cùng với một tệp manifest mô tả siêu dữ liệu và quyền hạn của tiện ích.

Các trường hợp sử dụng phổ biến cho tiện ích mở rộng trình duyệt bao gồm:

• Trình chặn quảng cáo: Xóa quảng cáo khỏi các trang web.
• Trình quản lý mật khẩu: Lưu trữ và quản lý mật khẩu một cách an toàn.
• Công cụ năng suất: Nâng cao quy trình làm việc với các tính năng như quản lý tác vụ và ghi chú.
• Tùy chỉnh nội dung: Sửa đổi giao diện và hành vi của các trang web.
• Công cụ trợ năng: Cải thiện khả năng truy cập web cho người dùng khuyết tật.

Manifest V3: Tiêu chuẩn Mới

Manifest V3 là phiên bản mới nhất của tệp manifest tiện ích mở rộng trình duyệt, một tệp JSON mô tả siêu dữ liệu, quyền hạn và tài nguyên của tiện ích. Nó giới thiệu những thay đổi đáng kể cho quy trình phát triển tiện ích, chủ yếu tập trung vào việc cải thiện bảo mật, quyền riêng tư và hiệu suất. Các thay đổi chính trong Manifest V3 bao gồm:

• Service Workers: Thay thế các trang nền (background pages) bằng service worker để cải thiện hiệu suất và giảm mức tiêu thụ bộ nhớ. Service worker là các kịch bản dựa trên sự kiện chạy ngầm và xử lý các sự kiện như yêu cầu mạng và báo thức.
• Declarative Net Request API: Thay thế API webRequest chặn (blocking) bằng API Declarative Net Request để lọc các yêu cầu mạng. Điều này tăng cường quyền riêng tư và bảo mật bằng cách hạn chế quyền truy cập của tiện ích vào lưu lượng mạng.
• Chính sách Bảo mật Nội dung (CSP): Thực thi các chính sách CSP nghiêm ngặt hơn để ngăn chặn việc thực thi mã tùy ý và giảm thiểu rủi ro bảo mật.
• Phiên bản Manifest: Khóa manifest_version trong tệp manifest.json phải được đặt thành 3.

Chuyển đổi từ Manifest V2 sang Manifest V3

Việc chuyển đổi từ Manifest V2 sang Manifest V3 đòi hỏi phải lập kế hoạch cẩn thận và sửa đổi mã nguồn. Dưới đây là hướng dẫn từng bước:

1. Cập nhật tệp manifest: Đặt manifest_version thành 3 và cập nhật các trường permissions và background để tuân thủ các yêu cầu của Manifest V3.
2. Thay thế trang nền bằng service worker: Viết lại các kịch bản nền dưới dạng service worker, xử lý các sự kiện bằng API chrome.scripting và chrome.alarms.
3. Chuyển sang API Declarative Net Request: Thay thế các lệnh gọi API webRequest chặn bằng các quy tắc khai báo được định nghĩa trong API declarativeNetRequest.
4. Cập nhật chính sách bảo mật nội dung: Điều chỉnh trường content_security_policy trong tệp manifest để tuân thủ các yêu cầu CSP nghiêm ngặt hơn.
5. Kiểm thử kỹ lưỡng: Kiểm thử tiện ích mở rộng một cách toàn diện trên các trình duyệt khác nhau để đảm bảo tính tương thích và chức năng hoạt động đúng.

Ví dụ: Chuyển đổi một Kịch bản Nền sang Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Các API JavaScript Thiết yếu cho Tiện ích Mở rộng Trình duyệt

Các tiện ích mở rộng trình duyệt dựa vào một bộ API JavaScript để tương tác với trình duyệt và các trang web. Dưới đây là một số API quan trọng nhất:

1. chrome.runtime

API chrome.runtime cung cấp quyền truy cập vào môi trường thời gian chạy của tiện ích. Nó cho phép các tiện ích giao tiếp với kịch bản nền, truy cập tệp manifest và quản lý vòng đời của tiện ích.

Các phương thức chính:

• chrome.runtime.sendMessage(): Gửi một tin nhắn đến kịch bản nền hoặc các tiện ích khác.
• chrome.runtime.onMessage.addListener(): Lắng nghe tin nhắn từ các kịch bản khác.
• chrome.runtime.getManifest(): Trả về tệp manifest của tiện ích dưới dạng một đối tượng JavaScript.
• chrome.runtime.reload(): Tải lại tiện ích.

Ví dụ: Gửi tin nhắn từ Content Script đến Background Script

Kịch bản Nội dung (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Kịch bản Nền (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

API chrome.storage cung cấp một cơ chế để lưu trữ và truy xuất dữ liệu trong tiện ích. Nó cung cấp cả tùy chọn lưu trữ cục bộ và đồng bộ hóa.

Các phương thức chính:

• chrome.storage.local.set(): Lưu trữ dữ liệu cục bộ.
• chrome.storage.local.get(): Truy xuất dữ liệu từ bộ nhớ cục bộ.
• chrome.storage.sync.set(): Lưu trữ dữ liệu được đồng bộ hóa trên các thiết bị của người dùng.
• chrome.storage.sync.get(): Truy xuất dữ liệu từ bộ nhớ đồng bộ hóa.

Ví dụ: Lưu trữ và Truy xuất Dữ liệu trong Bộ nhớ Cục bộ

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

API chrome.tabs cho phép các tiện ích tương tác với các tab của trình duyệt. Nó cung cấp các phương thức để tạo, truy vấn, sửa đổi và đóng các tab.

Các phương thức chính:

• chrome.tabs.create(): Tạo một tab mới.
• chrome.tabs.query(): Truy vấn các tab khớp với tiêu chí cụ thể.
• chrome.tabs.update(): Cập nhật thuộc tính của một tab.
• chrome.tabs.remove(): Đóng một tab.
• chrome.tabs.executeScript(): Thực thi mã JavaScript trong một tab.

Ví dụ: Tạo một Tab Mới

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

API chrome.alarms cho phép các tiện ích lên lịch các tác vụ sẽ được thực thi vào một thời điểm cụ thể hoặc sau một khoảng thời gian xác định. Điều này đặc biệt quan trọng trong Manifest V3 vì nó thay thế việc sử dụng bộ hẹn giờ trong các trang nền, vốn không còn được hỗ trợ.

Các phương thức chính:

• chrome.alarms.create(): Tạo một báo thức mới.
• chrome.alarms.get(): Truy xuất một báo thức hiện có.
• chrome.alarms.clear(): Xóa một báo thức.
• chrome.alarms.getAll(): Truy xuất tất cả các báo thức.
• chrome.alarms.onAlarm.addListener(): Lắng nghe các sự kiện báo thức.

Ví dụ: Tạo một Báo thức

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

API chrome.scripting cho phép các tiện ích chèn JavaScript và CSS vào các trang web. API này là một thành phần quan trọng của Manifest V3 và được các service worker sử dụng để tương tác với các trang web sau khi chúng được tải.

Các phương thức chính:

• chrome.scripting.executeScript(): Thực thi mã JavaScript trong một tab hoặc frame.
• chrome.scripting.insertCSS(): Chèn CSS vào một tab hoặc frame.

Ví dụ: Chèn JavaScript vào một Tab

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

API chrome.notifications cho phép các tiện ích hiển thị thông báo cho người dùng. Điều này hữu ích để cung cấp các bản cập nhật, cảnh báo và thông tin quan trọng khác.

Các phương thức chính:

• chrome.notifications.create(): Tạo một thông báo mới.
• chrome.notifications.update(): Cập nhật một thông báo hiện có.
• chrome.notifications.clear(): Xóa một thông báo.
• chrome.notifications.getAll(): Truy xuất tất cả các thông báo.

Ví dụ: Tạo một Thông báo

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

API chrome.contextMenus cho phép các tiện ích thêm các mục vào menu ngữ cảnh của trình duyệt (menu chuột phải). Điều này cung cấp một cách thuận tiện để người dùng truy cập chức năng của tiện ích trực tiếp từ các trang web.

Các phương thức chính:

• chrome.contextMenus.create(): Tạo một mục menu ngữ cảnh mới.
• chrome.contextMenus.update(): Cập nhật một mục menu ngữ cảnh hiện có.
• chrome.contextMenus.remove(): Xóa một mục menu ngữ cảnh.
• chrome.contextMenus.removeAll(): Xóa tất cả các mục menu ngữ cảnh do tiện ích tạo ra.

Ví dụ: Tạo một Mục Menu Ngữ cảnh

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

API chrome.i18n được sử dụng để quốc tế hóa tiện ích của bạn, giúp người dùng ở các ngôn ngữ và khu vực khác nhau có thể truy cập được. Nó cho phép bạn cung cấp các phiên bản bản địa hóa của giao diện người dùng và thông báo của tiện ích.

Các phương thức chính:

• chrome.i18n.getMessage(): Truy xuất một chuỗi đã bản địa hóa từ thư mục _locales của tiện ích.

Ví dụ: Sử dụng chrome.i18n để Bản địa hóa

Đầu tiên, tạo một thư mục _locales trong thư mục gốc của tiện ích. Bên trong, tạo các thư mục dành riêng cho ngôn ngữ như en, es, fr, v.v.

Trong mỗi thư mục ngôn ngữ, tạo một tệp messages.json. Ví dụ, trong _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Sau đó, trong mã JavaScript của bạn:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Tính tương thích Đa trình duyệt

Mặc dù Chrome là trình duyệt phổ biến nhất để phát triển tiện ích mở rộng, việc xem xét tính tương thích đa trình duyệt là rất quan trọng. Firefox, Safari và các trình duyệt khác cũng hỗ trợ tiện ích mở rộng, nhưng API và định dạng manifest của chúng có thể hơi khác nhau.

Để đảm bảo tính tương thích đa trình duyệt:

• Sử dụng API WebExtensions: API WebExtensions là một API được tiêu chuẩn hóa để phát triển tiện ích mở rộng trình duyệt được nhiều trình duyệt hỗ trợ.
• Kiểm thử trên các trình duyệt khác nhau: Kiểm thử tiện ích của bạn trên các trình duyệt khác nhau để xác định và khắc phục các vấn đề tương thích.
• Sử dụng polyfill: Sử dụng các polyfill để cung cấp chức năng API còn thiếu trên các trình duyệt khác nhau.
• Mã điều kiện: Sử dụng mã điều kiện để thích ứng với sự khác biệt của từng trình duyệt. Ví dụ: if (typeof browser === "undefined") { var browser = chrome; }

Các Phương pháp Tốt nhất để Phát triển Tiện ích Mở rộng Trình duyệt

Dưới đây là một số phương pháp tốt nhất cần tuân theo khi phát triển tiện ích mở rộng trình duyệt:

• Giảm thiểu quyền hạn: Chỉ yêu cầu những quyền mà tiện ích của bạn thực sự cần. Điều này tăng cường quyền riêng tư và bảo mật cho người dùng.
• Sử dụng các phương pháp lập trình an toàn: Tuân thủ các phương pháp lập trình an toàn để ngăn chặn các lỗ hổng như kịch bản chéo trang (XSS) và chèn mã.
• Tối ưu hóa hiệu suất: Tối ưu hóa hiệu suất của tiện ích để giảm thiểu tác động của nó đến hiệu suất trình duyệt.
• Cung cấp tài liệu rõ ràng và súc tích: Cung cấp tài liệu rõ ràng và súc tích để giúp người dùng hiểu cách sử dụng tiện ích của bạn.
• Xử lý lỗi một cách tinh tế: Triển khai xử lý lỗi để ngăn tiện ích của bạn bị treo hoặc gây ra hành vi không mong muốn.
• Giữ cho tiện ích của bạn luôn được cập nhật: Cập nhật tiện ích của bạn thường xuyên để giải quyết các lỗi, lỗ hổng bảo mật và các vấn đề tương thích.
• Xem xét quốc tế hóa (i18n): Thiết kế tiện ích của bạn để có thể dễ dàng bản địa hóa sang các ngôn ngữ khác nhau. Sử dụng API chrome.i18n.
• Tôn trọng quyền riêng tư của người dùng: Minh bạch về cách tiện ích của bạn thu thập và sử dụng dữ liệu người dùng, và nhận được sự đồng ý của người dùng khi cần thiết. Tuân thủ các quy định về quyền riêng tư có liên quan như GDPR và CCPA.

Gửi Tiện ích Mở rộng của Bạn lên các Cửa hàng

Khi tiện ích của bạn đã được phát triển và kiểm thử, bạn sẽ muốn gửi nó lên các cửa hàng tiện ích mở rộng của trình duyệt để cung cấp cho người dùng. Mỗi trình duyệt có cửa hàng và quy trình gửi riêng:

• Cửa hàng Chrome trực tuyến: Gửi tiện ích của bạn lên Cửa hàng Chrome trực tuyến cho người dùng Chrome. Quy trình bao gồm việc tạo tài khoản nhà phát triển, đóng gói tiện ích và tải nó lên cửa hàng.
• Tiện ích bổ sung Firefox: Gửi tiện ích của bạn đến Tiện ích bổ sung Firefox cho người dùng Firefox. Quy trình tương tự như Cửa hàng Chrome trực tuyến và bao gồm việc tạo tài khoản nhà phát triển và gửi tiện ích của bạn để được xem xét.
• Thư viện Tiện ích mở rộng Safari: Gửi tiện ích của bạn đến Thư viện Tiện ích mở rộng Safari cho người dùng Safari. Quy trình bao gồm việc nhận chứng chỉ nhà phát triển từ Apple và gửi tiện ích của bạn để được xem xét.

Khi gửi tiện ích của bạn, hãy chắc chắn cung cấp thông tin chính xác và đầy đủ, bao gồm tiêu đề mô tả, mô tả chi tiết, ảnh chụp màn hình và chính sách quyền riêng tư. Các cửa hàng tiện ích mở rộng sẽ xem xét các bài gửi để đảm bảo chúng tuân thủ các chính sách và nguyên tắc của họ.

Kết luận

Phát triển tiện ích mở rộng trình duyệt với Manifest V3 và các API JavaScript cung cấp một cách mạnh mẽ để tùy chỉnh và nâng cao trải nghiệm duyệt web. Bằng cách hiểu các khái niệm cốt lõi, tuân theo các phương pháp hay nhất và xem xét tính tương thích đa trình duyệt, các nhà phát triển có thể tạo ra các tiện ích có giá trị và hấp dẫn cho người dùng trên toàn thế giới. Khi web phát triển, các tiện ích mở rộng trình duyệt sẽ tiếp tục đóng một vai trò quan trọng trong việc định hình tương lai của internet.

Hãy nhớ luôn ưu tiên quyền riêng tư và bảo mật của người dùng khi phát triển tiện ích mở rộng. Bằng cách xây dựng với những nguyên tắc này, bạn có thể tạo ra các tiện ích vừa hữu ích vừa đáng tin cậy.

Hướng dẫn này cung cấp một nền tảng vững chắc để bắt đầu với việc phát triển tiện ích mở rộng trình duyệt. Khi bạn tìm hiểu sâu hơn, hãy khám phá các API và tính năng khác nhau có sẵn, và thử nghiệm với các kỹ thuật khác nhau để tạo ra các tiện ích sáng tạo và có tác động.